* {
  color: white;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  border: 0;
}

.title {
	position:relative;
	top: -400px;
	left: -80px;
	width: 1500px;
	margin:auto;
	font-family: "microsoft sans serif";
	font-size:50px;
	text-indent: -22px;
	text-shadow: 5px 5px 0px #2c3e50;
	animation-name: amove;
	animation-duration: 1.8s;
}
#title2{
	position: fixed;
	left: 280px;
	top: 40px;
	opacity: 1;
	transition: opacity 1.5s;
}
#wangzhanm{
	position: fixed;
	left: 272px;
	top: 40px;
	opacity: 0;
	transition: opacity 1s;
}
.title:hover>#title2{
	transition: opacity 1s;
	opacity: 0;
}
.title:hover>#wangzhanm{
	opacity: 1;
	transition: opacity 2s;
}
.menu {
  position: relative;
  height: 100%;
  width: 65px;
  background-color: rgba(255,255,255,0.3);
  transition:width 1s;
   overflow-x:hidden;
  font-family: 'Michroma', sans-serif;
  z-index: 99;
  animation-name: amove;
  animation-duration: 3s;
}
.menu:hover {
  width: 220px;
}

.menuItem span {
  position: absolute;
  left:80px;
  top:20px;
  transition:color 1s;
  color:rgba(255,255,255,0);
}

.menu:hover .menuItem  span {
 color:rgba(255,255,255,1);
}

.menuItem {
  position: relative;
  padding: 20px;
  transition:border .5s, background .2s;  
}

.menuItem:hover {
  background: #34495e;
  cursor: pointer;
}

.uno {
  border-left:5px solid #16a085;
}

.uno:hover{
  border-left:20px solid #16a085;
}

.dos {
 border-left:5px solid #2980b9;
}

.dos:hover {
 border-left:20px solid #2980b9;
}

.tres {
  border-left:5px solid #8e44ad;
}

.tres:hover {
  border-left:20px solid #8e44ad;
}

.cuatro {
  border-left:5px solid #e67e22;
}

.cuatro:hover {
  border-left:20px solid #e67e22;
}

.cinco {
 border-left:5px solid #e74c3c;
}

.cinco:hover {
 border-left:20px solid #e74c3c;
}
